<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React 直接测试</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="react-root"></div>
    
    <script type="text/babel">
        console.log('React 直接测试开始');
        console.log('React:', typeof React);
        console.log('ReactDOM:', typeof ReactDOM);
        
        const TestComponent = () => {
            console.log('TestComponent 正在渲染');
            return (
                <div style={{
                    padding: '40px',
                    backgroundColor: '#e6f7ff',
                    minHeight: '100vh',
                    fontFamily: 'Arial, sans-serif',
                    textAlign: 'center'
                }}>
                    <h1 style={{ color: '#1890ff', marginBottom: '20px' }}>React 直接测试成功！</h1>
                    <p style={{ fontSize: '18px', color: '#333' }}>这个页面使用CDN版本的React直接渲染</p>
                    <p style={{ fontSize: '14px', color: '#666' }}>当前时间: {new Date().toLocaleString()}</p>
                    <div style={{
                        backgroundColor: '#fff',
                        padding: '20px',
                        borderRadius: '8px',
                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                        marginTop: '20px',
                        display: 'inline-block'
                    }}>
                        <p>如果你能看到这个内容，说明:</p>
                        <ul style={{ textAlign: 'left' }}>
                            <li>浏览器支持现代JavaScript</li>
                            <li>React库加载正常</li>
                            <li>JSX转换正常</li>
                            <li>DOM渲染正常</li>
                        </ul>
                    </div>
                </div>
            );
        };
        
        try {
            const container = document.getElementById('react-root');
            if (container) {
                const root = ReactDOM.createRoot(container);
                root.render(<TestComponent />);
                console.log('React 应用渲染成功');
            } else {
                console.error('找不到容器元素');
            }
        } catch (error) {
            console.error('渲染失败:', error);
            document.body.innerHTML = '<h1 style="color: red; padding: 20px;">渲染失败: ' + error.message + '</h1>';
        }
    </script>
</body>
</html>